<template>
  <div class="page">
      <el-table :data="dataList" v-loading="loading" size="small"
        height="calc(100% - 80px)" @expand-change="detail" class="table">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-tabs>
              <el-tab-pane label="学生副表_德育加分">
                <el-table size="small"
                  :data="scope.row.studentMoreduViceAddList" style="width: 100%" >
                  <el-table-column type="selection" header-align="center" align="center" width="50">
                  </el-table-column>
                  <el-table-column prop="addReason" show-overflow-tooltip label="加分原因">
                  </el-table-column>
                  <el-table-column prop="addTime" show-overflow-tooltip label="加分时间">
                  </el-table-column>
                  <el-table-column prop="addPoint" show-overflow-tooltip label="加分数">
                  </el-table-column>
                  <el-table-column prop="addState" show-overflow-tooltip label="审核状态">
                    <template slot-scope="scope">
                      {{ $dictUtils.getDictLabel("audit_status", scope.row.addState, '-') }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="addEnclosure" show-overflow-tooltip label="附件">
                    <template slot-scope="scope" v-if="scope.row.addEnclosure">
                      <el-image style="height: 50px;width:50px;margin-right:10px;" :src="src"
                        v-for="(src, index) in scope.row.addEnclosure.split(',')" :key="index"
                        :preview-src-list="scope.row.addEnclosure.split(',')">
                      </el-image>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="学生副表-德育减分">
                <el-table size="small" :data="scope.row.studentMoreduViceSubList" style="width: 100%">
                  <el-table-column prop="subReason" show-overflow-tooltip label="扣分原因">
                  </el-table-column>
                  <el-table-column prop="subTime" show-overflow-tooltip label="扣分时间">
                  </el-table-column>
                  <el-table-column prop="subPoint" show-overflow-tooltip label="扣分数">
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </template>
        </el-table-column>
        <el-table-column prop="name" show-overflow-tooltip sortable="custom" label="姓名">
        </el-table-column>
        <el-table-column prop="institute" show-overflow-tooltip sortable="custom" label="学院">
        </el-table-column>
        <el-table-column prop="grade" show-overflow-tooltip sortable="custom" label="年级">
        </el-table-column>
        <el-table-column prop="classe" show-overflow-tooltip sortable="custom" label="班级">
        </el-table-column>
        <el-table-column prop="studentId" show-overflow-tooltip sortable="custom" label="学号">
        </el-table-column>
        <el-table-column prop="currentInstructor" show-overflow-tooltip sortable="custom" label="当前辅导员">
        </el-table-column>
        <el-table-column prop="currentMoraleduPoint" show-overflow-tooltip sortable="custom" label="目前德育分">
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        searchForm: {
          year: '',
          name: '',
          institute: '',
          grade: '',
          classe: '',
          studentId: '',
          currentInstructor: '',
          currentMoraleduPoint: ''
        },
        dataList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0,
        orderBy: '',
        dataListSelections: [],
        isImportCollapse: false,
        loading: false,
        src: '', // 附件
        selectId: '', // 多选id
        selectIdList: []
      }
    },
    // activated () {
    //   this.refreshList()
    // },
    methods: {
      // 获取数据列表
      refreshList (institute, grade, classe) {
        this.loading = true
        this.$http({
          url: '/moredumain/studentMoreduMain/list',
          method: 'get',
          params: {
            'institute': institute,
            'grade': grade,
            'classe': classe
          }
        }).then(({
          data
        }) => {
          if (data && data.success) {
            this.dataList = data.page.list
            this.total = data.page.count
            this.loading = false
          }
        })
      },
      // 查看详情
      detail (row) {
        this.$http.get(`/moredumain/studentMoreduMain/queryById?id=${row.id}`).then(({
          data
        }) => {
          this.dataList.forEach((item, index) => {
            if (item.id === row.id) {
              item.studentMoreduViceAddList = data.studentMoreduMain.studentMoreduViceAddList
              item.studentMoreduViceSubList = data.studentMoreduMain.studentMoreduViceSubList
            }
          })
        })
      }
    }
  }
</script>
